<template>
  <f7-page>
    <f7-navbar title="我的合约" back-link=" "></f7-navbar>

    <div class="content-padding">
      <div class="info-box">
        <div>认购时间 <span>{{$moment(contractInfo.add_time *1000).format('YYYY-MM-DD HH:mm:ss')}}</span></div>
        <div>质押数量USDT <span>{{contractInfo.old_money}}</span></div>
        <div>兑换数量ZOL <span>{{contractInfo.money}}</span></div>
        <div>质押周期(天) <span>{{contractInfo.cycle}}</span></div>
<!--        <div>购买数量 <span>{{contractInfo.money}}</span></div>-->
        <div>今日ZOL奖励率 <span>{{$store.getters.config.config.static_bili / contractInfo.cycle * 100}}%</span></div>
        <div>预计ZOL每日收益 <span>${{contractInfo.old_money * $store.getters.config.config.static_bili / contractInfo.cycle}}</span></div>
        <div>ZOL收益天数 <span>共{{contractInfo.sf_num}}天</span></div>
      </div>

<!--      <p class="tips-p">注：ZOL奖励每日发放，将折算为等价值的USDT</p>-->
      <h3>奖励发放情况</h3>
      <p class="total-jiangli">{{maxMonth<10?'0'+maxMonth:maxMonth}}月ZOL总奖励：{{maxMonthMoney}}</p>

      <div class="list-box">
        <div class="record-item" v-for="(item, index) in contractList" :key="index">
          <div>{{$moment(item.add_time * 1000).format('MM')}}月ZOL奖励 <span>{{item.money}}ZOL</span></div>
          <div>{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}发放</div>
        </div>
      </div>
    </div>

  </f7-page>
</template>

<script>
  import { getOneProjectList } from "../api/home";

  export default {
    name: "my-contract",
    data() {
      return {
        contractInfo: {},
        contractList: [],
        maxMonth: '',
        maxMonthMoney: '',
        price: ''
      }
    },
    mounted() {
      this.init(this.$f7route.query.id);
    },
    methods: {
      init(project_id) {
        getOneProjectList({project_id}).then(res => {
          this.contractInfo = res.data.project;
          this.contractList = res.data.finance;
          this.price = res.data.price;
          // const max = Math.max(...this.contractList)
          this.maxMonth = Math.max(...this.contractList.map((item, index) => {
            return new Date(item.add_time*1000).getMonth()+1
          }))
          console.log('最大值', this.maxMonth);
          this.maxMonthMoney = this.contractList.filter(item => {
            let month = new Date(item.add_time*1000).getMonth()+1
            return month === this.maxMonth;
          }).reduce((total, cur) => total + parseFloat(cur.money), 0);
          console.log('最新月份统计', this.maxMonthMoney)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    padding: $padding;
    h3 {
      margin-top: $padding;
    }
    .tips-p {
      color: $colorGrey;
      padding: $padding 0;
    }
    .total-jiangli {
      color: $mainColor;
      padding: $padding20 0;
      span {
        color: $colorGrey;
      }
    }
  }
  .info-box {
    background: #fff;
    padding: $padding20;
    > div {
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      padding: $padding 0;
      border-bottom: 1px solid $borderColor;
      &:first-child {
        span {
          color: $colorGrey;
        }
      }
      &:last-child {
        border: none;
      }
      span {
        color: $mainColor;
      }
    }
  }
  .list-box {
    background: #fff;
    .record-item {
      padding: $padding;
      border-bottom: 1px solid $borderColor;
      &:last-child {
        border: none;
      }
      > div {
        display: flex;
        justify-content: space-between;
        &:last-child {
          color: $colorGrey;
          padding-top: 10px;
        }
      }
    }
  }
</style>